<template>
<div class="cc">
    <h2>购物车(使用计算属性)</h2>
    <label>单价:</label>
    <input type="number" v-model="price" />

    <label>数量:</label>
    <input type="number" v-model="quantity" />

    <p>单价: {{ price }}</p>
    <p>数量: {{ quantity }}</p>
    <p>总价: {{ total }}</p>
</div>
</template>

<script setup>
import { ref,computed } from 'vue'

const price = ref(0)
const quantity = ref(0)

// const total=ref(0)
const total = computed(() => {
    const p = ref(2)
    return price.value * quantity.value + p.value
})

</script>

<style scoped>
.cc{
    background-color: rgb(218, 243, 247);
    padding:20px;
    border-radius:10px;
}
</style>